<template>
  <div>
    <Header></Header>
    <section
      data-test="page-section"
      data-section-theme="black"
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--medium horizontal-alignment--center vertical-alignment--middle has-background softwareMain black"
      data-section-id="607bf7274e53660217010cd5"
      data-controller="SectionWrapperController"
      data-animation="none"
      data-controllers-bound="SectionWrapperController"
      style="padding-top: 264px"
      data-active="true"
    >
      <div class="section-border">
        <div class="section-background" style="top: 267.656px">
          <img
            data-image-dimensions="1000x750"
            data-image-focal-point="0.2787413570842611,0.5000390655519962"
            data-load="false"
            elementtiming="nbf-background"
            src="../../assets/imgs/4.jpg"
            width="1000"
            height="750"
            sizes="(max-width: 799px) 200vw, 100vw"
            style="
              display: block;
              object-position: 27.874135708426113% 50.00390655519962%;
            "
            fetchpriority="high"
            loading="eager"
            decoding="async"
            data-loader="sqs"
          />
          <div class="section-background-overlay" style="opacity: 0.08"></div>
        </div>
      </div>
      <div class="content-wrapper" style="">
        <div class="content">
          <div
            class="sqs-layout sqs-grid-12 columns-12"
            data-type="page-section"
            id="page-section-6073ff55c64f9762a2a3667b"
          >
            <div class="row sqs-row">
              <div class="col sqs-col-12 span-12">
                <div
                  class="sqs-block html-block sqs-block-html"
                  data-block-type="2"
                >
                  <div class="sqs-block-content">
                    <div class="sqs-html-content">
                      <h2
                        style="
                          text-align: center;
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.264s;
                        "
                        class="preScale scaleIn h2-1"
                      >
                        Analyses the trend of users sleep quality changes
                      </h2>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      data-test="page-section"
      data-section-theme=""
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--medium horizontal-alignment--center vertical-alignment--middle"
    >
      <div class="content-wrapper">
        <div class="content">
          <div class="row sqs-row">
            <div class="col sqs-col-12 span-12">
              <div class="link-box">
                <router-link class="link-1" to="/productsmenu"
                  >Go Back</router-link
                >
              </div>
              <div class="img-box">
                <img
                  data-stretch="false"
                  data-src="../../assets/imgs/sleep1.png"
                  data-image="../../assets/imgs/sleep1.png"
                  data-image-dimensions="180x160"
                  data-image-focal-point="0.5,0.5"
                  alt="Picture 1.png"
                  data-load="false"
                  elementtiming="system-image-block"
                  src="../../assets/imgs/sleep1.png"
                  width="180"
                  height="160"
                  sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw"
                  style="
                    display: block;
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    object-position: 50% 50%;
                  "
                  onload='this.classList.add("loaded")'
                  srcset="
                    ../../assets/imgs/sleep1.png?format=100w   100w,
                    ../../assets/imgs/sleep1.png?format=300w   300w,
                    ../../assets/imgs/sleep1.png?format=500w   500w,
                    ../../assets/imgs/sleep1.png?format=750w   750w,
                    ../../assets/imgs/sleep1.png?format=1000w 1000w,
                    ../../assets/imgs/sleep1.png?format=1500w 1500w,
                    ../../assets/imgs/sleep1.png?format=2500w 2500w
                  "
                  loading="lazy"
                  decoding="async"
                  data-loader="sqs"
                  class="loaded"
                />
              </div>
              <div class="tip1-botm">
                <h3><strong>Sleep Xiaobao S-S01</strong></h3>
              </div>
              <div class="tip1">
                <p><strong>Product Introduction</strong></p>
              </div>
              <div class="tip2">
                <p>
                  Sleep Xiaobao intelligently analyses the trend of user quality
                  changes, with its own body movement and sleep duration
                  monitoring, and provides periodic sleep report, after the
                  sleep data is synchronised, you can remotely share and follow
                  relatives' sleep.
                </p>
              </div>
              <div class="tip1">
                <p><strong>Product Composition</strong></p>
              </div>
              <div class="imgp">
                <img
                  data-stretch="false"
                  data-image-dimensions="436x294"
                  data-image-focal-point="0.5,0.5"
                  alt="Hole 2. Hole 3. Battery Insert 4. Dashboard"
                  data-load="false"
                  elementtiming="system-image-block"
                  src="../../assets/imgs/5.jpg"
                  width="436"
                  height="294"
                  sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw"
                  style="
                    display: block;
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    object-position: 50% 50%;
                  "
                  onload='this.classList.add("loaded")'
                  loading="lazy"
                  decoding="async"
                  data-loader="sqs"
                  class="loaded"
                />
                <p>1.Hole 2. Hole 3. Battery Insert 4. Dashboard</p>
              </div>
              <div class="tip1">
                <p><strong>Product Features</strong></p>
              </div>
              <div class="tip2">
                <p>Simple and easy to use</p>
              </div>
              <div class="tip2">
                <p>
                  Monitor sleep cycle, sleep time, body movement, wake up every
                  day, visually show the pattern of deep and shallow sleep.
                  WeChat Mini Program
                </p>
              </div>
              <div class="tip2">
                <p>
                  Open the WeChat applet, sleep music, view reports, and upload
                  data are all done, no need to install APP. Worry-free battery
                  life
                </p>
              </div>
              <div class="tip2">
                <p>
                  Comfortable without restraint, non-wearing, more relaxed,
                  Sleeping Xiaobao lasts for more than 3 months, the battery can
                  be replaced,
                </p>
              </div>
              <div class="tip2">
                <p>Simple and convenient sleep health products</p>
              </div>
              <div class="tip1">
                <p><strong>Application Scenarios</strong></p>
              </div>
              <div class="tip1">
                <p><em>Personal sleep test</em></p>
              </div>
              <div>
                <img
                  data-stretch="false"
                  width="1957"
                  height="1223"
                  sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw"
                  style="
                    display: block;
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    object-position: 50% 50%;
                  "
                  onload='this.classList.add("loaded")'
                  src="../../assets/imgs/6.jpg"
                  loading="lazy"
                  decoding="async"
                  data-loader="sqs"
                  class="loaded"
                />
              </div>
              <div class="tip1">
                <p><strong>Product Parameter</strong></p>
              </div>
              <div class="tip2 circle">
                <p>Name and model: Sleeping Little Treasure A001</p>
              </div>
              <div class="tip2 circle">
                <p>Size: 3.0×3.0×1.1cm</p>
              </div>
              <div class="tip2 circle">
                <p>Weight: 3.0g</p>
              </div>
              <div class="tip2 circle">
                <p>color: White</p>
              </div>
              <div class="tip2 circle">
                <p>Communication method: Bluetooth 4.0</p>
              </div>
              <div class="tip2 circle">
                <p>Communication distance: within 10 meters indoors</p>
              </div>
              <div class="tip2 circle">
                <p>Power supply: Cr2032 button battery</p>
              </div>
              <div class="tip2 circle">
                <p>Working time: about 3 months</p>
              </div>
              <div class="tip2 circle">
                <p>
                  Software platform: Android4.3 or above, IOS7 or above, WeChat
                  6.0 and above
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../../components/header.vue";
import Footer from "../../components/footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>
<style scoped>
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h1 {
    /* font-size: calc((4 - 2)* 1.2vw + 1rem); */
  }
  h2 {
    font-size: calc(1.8 * 1.2vw + 1rem);
    font-weight: 500;
  }
  .h1-1 {
    font-size: calc((4 - 1) * 1.2vw + 1rem);
  }
}
@media screen and (min-width: 768px) {
  .content {
    width: 75%;
  }
}
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h3 {
    font-size: calc(1.1 * 1.2vw + 1rem);
  }
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page-section.section-height--medium:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: 66vh;
}
.section-background {
  overflow: hidden;
  pointer-events: none;
}
.page-section.background-width--inset:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 4vw;
  padding-left: 4vw;
}
.section-background,
.section-background .section-background-content,
.section-background .section-background-canvas,
.section-background .section-background-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.background-width--inset:not(.content-collection):not(.gallery-section):not(
    .user-items-list-section
  )
  .section-background {
  top: 4vw;
  right: 4vw;
  bottom: 4vw;
  left: 4vw;
  /* position: absolute; */
}
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
  clear: both;
}
.sqs-row::before,
.sqs-row::after {
  content: "";
  display: block;
  clear: both;
}
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3),
.sqs-block-html .sqs-html-content *:not(h1):not(h2):not(h3) {
  word-wrap: break-word;
}
.tradiTip1 {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 70%;
  left: 20%;
}
.section-background img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.section-background img {
  position: relative;
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
h1 {
  color: #fff;
}
h1 {
  text-align: center;
  white-space: pre-wrap;
  transition-timing-function: ease;
  transition-duration: 0.65s;
  transition-delay: 0.32s;
}
.h2-1 {
  margin-top: 0;
  margin-bottom: 0;
  color: #fff;
}
.page-section.vertical-alignment--middle:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section):not(.editmode-changing-rowcount) {
  align-items: center;
}
.page-section.section-height--small:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: inherit;
}
.sqs-col-12 {
  width: 100%;
}
.link-box {
  padding-bottom: 17px;
}
.link-1 {
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #000;
  font-size: 14px;
}
.img-box {
  max-width: 390px;
  margin: 0 auto;
}
.tip1-botm {
  padding-bottom: 17px;
  text-align: center;
}
.tip1 h3 {
  margin-bottom: 0;
  text-align: center;
}
.tip2 {
  /* padding-bottom: 17px; */
  word-wrap: break-word;
  color: #333;
  font-family: poppins;
  font-weight: 300;
  line-height: 30px;
  position: relative;
}
.circle p {
  padding-left: 60px;
}
.circle::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
}
.tip3 p {
  margin: 17px 0;
  color: rgb(0, 36, 82);
}
.h3Css {
  padding-bottom: 0;
}
.h3Css h3 {
  text-align: left;
}
.imgp {
  text-align: center;
}
.imgp img {
  max-width: 436px;
  margin: 0 auto;
}
</style>
